import React, { Component,createRef } from 'react'
import {Card, Form, Input, InputNumber, Button,DatePicker, Spin, message } from 'antd';
import E from 'wangeditor';

import {getArticleContent, saveArticle} from '@/services';

import {NavLink} from 'react-router-dom';

import {DivWrapper} from './style';
import moment from 'moment';

export default class Edit extends Component {
    constructor(props) {
        super(props);

        this.state = {
            ArticleID: this.props.match.params.id,
            layout: {
                labelCol: {
                  span: 4,
                },
                wrapperCol: {
                  span: 12,
                },
              },
            isLoading: false

            }

        this.editor = null;
        this.editorRef = createRef();
    }

    //表单相关

    onFinish = (values) => {
        // console.log(values);
        values.createAt = values.createAt.valueOf();
        // console.log(values);
        this.setState({
            isLoading: true
        })
        //将修改后的数据返回到服务端
        saveArticle(this.state.ArticleID, values)
        .then(res => {
            //获取到errMsg，然后进行展示，然后返回
            console.log(res.data.msg);
            const msg = res.data.msg;
            // alert(msg);
            message.success(msg);
            //进行页面的跳转
            this.props.history.push('/admin/article');
           
        }).finally(()=> {
            this.setState({
                isLoading: false
            })
        })
    }
    
    // //文本编辑器相关
    initEditor = ()=>{
        this.editor = new E(document.getElementById('edit'));
        //设置文本编辑器
        this.editor.config.height = 500;
        this.editor.config.onchange = (newHtml) => {
            this.editorRef.current.setFieldsValue({
                content: newHtml
            })
            
        }
        this.editor.create();
    }

    componentDidMount(){
        this.initEditor();
        this.setState({
            isLoading: true
        })
        getArticleContent(this.state.ArticleID)
        .then(res => {
            // console.log(res);
            const data = res.data;
            this.editorRef.current.setFieldsValue({
                title: data.title,
                author: data.author,
                amount: data.amount,
                createAt: moment(data.createAt),
            })
            this.editor.txt.html(data.content);
        })
        .finally(() =>{
            this.setState({
                isLoading: false
            })
        })

       
    }


    //获取文章信息
    getHtml = (name) => {
        console.log(name);
        // console.log(this.editor.txt.html());
    }


    render() {
        const {layout, isLoading} = this.state;
        return (
            <Card
                title="文章编辑页面"
                bordered={false}
                style={{ width: '100%', height: '100%'}}
                // 点击取消按钮，会跳转到文章列表页面
                extra={<Button><NavLink to={'/admin/article/'}>取消</NavLink></Button>}
            >
                {/* 可以从数据库中根据id查询该文章， 然后将文章内容展示出来，然后可以进行修改 */}
                <Spin spinning={isLoading}>
                    <Form {...layout} 
                    name="nest-messages" 
                    onFinish={this.onFinish} 
                    ref={this.editorRef}
                    // validateMessages={validateMessages}
                    
                    >
                        <Form.Item
                            name={'title'}
                            label="文章标题"
                            rules={[
                            {
                                required: true,
                            },
                            ]}
                            
                        >
                            <Input placeholder="Article Tile"/>
                        </Form.Item>
                        <Form.Item
                            name={'author'}
                            label="作者"
                            rules={[
                            {
                                required:true,
                                type: 'string',
                                
                               
                            },
                            ]}
                        >
                            <Input placeholder="Author"/>
                        </Form.Item>
                        <Form.Item
                            name={'amount'}
                            label="阅读量"
                            rules={[
                            {
                                type: 'number',
                                min: 0,
                                max: 3000,
                                required: true
                            },
                            ]}
                        >
                            <InputNumber placeholder='0'/>
                        </Form.Item>
                        <Form.Item 
                            name={'createAt'}
                            label="发布日期" 
                            rules={[
                                {
                                  type: 'object',
                                  required: true,
                                  message: 'Please select time!',
                                },
                              ]}
                        >
                            <DatePicker showTime format="YYYY-MM-DD HH:mm:ss" placeholder="Select Time"/>
                        </Form.Item>
                        <Form.Item
                            name={'content'}
                            label="内容"
                            rules={[
                            {
                                required:true,
                                type: 'string',
                                message:'请输入文章内容'
                            },
                            ]}
                            // setFieldsValue=({content: this.state.content})
                               
                        
                            
                        >
                            <DivWrapper
                                
                                id="edit"
                            >
                                请在下面编辑器中输入内容：
                            </DivWrapper>
                        </Form.Item>
                        <Form.Item wrapperCol={{ sapn:12, offset: 4 }}>
                            <Button type="primary" htmlType="submit">
                            保存修改
                            </Button>
                        </Form.Item>

                </Form>
                {/* <Button type="primary" onClick={this.getHtml}>获取文章</Button> */}
                </Spin>
             </Card>
        )
    }

}



